import React from 'react'
import superTableRender from '@/components/amis/SuperTable/superTableRender'
import { CRUDTableSchema } from 'amis/lib/renderers/CRUD'
import { ButtonSchema } from 'amis'
import UIRealTimeCodeEditor from '@/components/UIRealTimeCodeEditor/UIRealTimeCodeEditor'

const SuperTable = () => {
	const schema = superTableRender.getSchema({
		title: '超级表格',
		tableSchema: {
			api: '/mock/amis/api/sample',
			headerToolbar: [
				{
					label: '新增',
					type: 'button',
					actionType: 'dialog',
					level: 'primary',
					dialog: {
						title: '新增表单',
						body: {
							type: 'form',
							api: 'post:/amis/api/mock2/sample',
							body: [
								{
									type: 'input-text',
									name: 'engine',
									label: 'Engine',
								},
								{
									type: 'input-text',
									name: 'browser',
									label: 'Browser',
								},
							],
						},
					},
				} as ButtonSchema,
			],
			bulkActions: [
				{
					label: '批量删除',
					actionType: 'ajax',
					api: 'post:/amis/api/mock2/sample',
					confirmText: '确定要批量删除?',
				},
				{
					label: '批量修改',
					actionType: 'dialog',
					dialog: {
						title: '批量编辑',
						body: {
							type: 'form',
							api: 'post:/amis/api/mock2/sample',
							body: [
								{
									type: 'hidden',
									name: 'ids',
								},
								{
									type: 'input-text',
									name: 'engine',
									label: 'Engine',
								},
							],
						},
					},
				},
			],
			columns: [
				{
					type: 'ace-col-index',
					label: '#',
					width: 20,
				},
				{
					name: 'id',
					label: 'ID',
					searchable: true,
				},
				{
					name: 'engine',
					label: 'Rendering engine',
					searchable: true,
				},
				{
					name: 'browser',
					label: 'Browser',
					searchable: true,
				},
				{
					name: 'platform',
					label: 'Platform(s)',
				},
				{
					name: 'version',
					label: 'Engine version',
					searchable: true,
				},
				{
					name: 'grade',
					label: 'CSS grade',
					searchable: true,
				},
				{
					name: 'createTime',
					label: '创建时间',
					type: 'ace-col-datetime',
				},
				{
					type: 'operation',
					label: '操作',
					buttons: [
						{
							label: '详情',
							type: 'button',
							level: 'link',
							actionType: 'dialog',
							dialog: {
								title: '查看详情',
								body: {
									type: 'form',
									body: [
										{
											type: 'input-text',
											name: 'engine',
											label: 'Engine',
										},
										{
											type: 'input-text',
											name: 'browser',
											label: 'Browser',
										},
										{
											type: 'input-text',
											name: 'platform',
											label: 'platform',
										},
										{
											type: 'input-text',
											name: 'version',
											label: 'version',
										},
										{
											type: 'control',
											label: 'grade',
											body: {
												type: 'tag',
												label: '${grade}',
												displayMode: 'normal',
												color: 'active',
											},
										},
									],
								},
							},
						},
						{
							label: '删除',
							type: 'button',
							level: 'link',
							className: 'text-danger',
							//disabledOn: 'this.grade === "A"'
						},
					],
				},
			],
		} as CRUDTableSchema,
	})
	return <UIRealTimeCodeEditor code={schema} />
}

export default SuperTable
